<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-2.1.4.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container text-center" style="margin-top: 50px">
    <h2 style="margin: 20px">欢迎<strong>张强</strong>，员工请假列表页面</h2>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <th>ID</th>
        <th>员工姓名</th>
        <th>所在部门</th>
        <th>请假原因</th>
        <th>请假起止日期</th>
        <th>审核状态</th>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>张强</td>
            <td>研发一部</td>
            <td>病假</td>
            <td>2019-05-21至2019-05-23</td>
            <td class="text-muted">未审核</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张强</td>
            <td>研发一部</td>
            <td>事假</td>
            <td>2019-05-18至2019-05-18</td>
            <td class="text-success">已通过</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张强</td>
            <td>研发一部</td>
            <td>婚假</td>
            <td>2019-05-01至2019-05-05</td>
            <td class="text-warning">已驳回</td>
        </tr>
        </tbody>
    </table>
    <ul class="pagination" style="margin-left: 350px">
        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item"><a class="page-link" href="#">6</a></li>
        <li class="page-item"><a class="page-link" href="#">7</a></li>
        <li class="page-item"><a class="page-link" href="#">8</a></li>
        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
</div>
</body>
</html>